<template>
  <div class='page'>
    <div class="main-box">
      <div class="left-bg-box" ondragstart="return false;" onselectstart="return false;">
        <img class="login-bg-base" src="../../assets/img/login_bg01.png">
        <img class="login-bg-base login-bg-ani02" src="../../assets/img/login_bg03.png">
        <img class="login-bg-base login-bg-ani01" src="../../assets/img/login_bg02.png">
        <img class="login-bg-small01 login-bg-ani04" src="../../assets/img/login_bg04.png">
        <img class="login-bg-small02 login-bg-ani05" src="../../assets/img/login_bg04.png">
        <img class="login-bg-small03 login-bg-ani03" src="../../assets/img/login_bg04.png">
        <img class="login-bg-small04 login-bg-ani03" src="../../assets/img/login_bg05.png">
        <img class="login-bg-small05 login-bg-ani05" src="../../assets/img/login_bg05.png">
      </div>
      <div class="login-box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px"
                 class="demo-ruleForm login-container" status-icon>
          <img class="title-logo" src="../../assets/img/logo.svg">
          <h3 class="title">2-SIT后台管理系统</h3>
          <el-form-item prop="account">
            <el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"
                      id="loginEmail"></el-input>
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off" placeholder="密码"
                      id="loginPassword"></el-input>
            <label id="showPasswordToggle">
              <el-checkbox v-model="checked" id="showPasswordCheck">记住我</el-checkbox>
            </label>
            <!--<router-link to="/" style="float: right; color: #bbbbbb">忘记密码？</router-link>-->
          </el-form-item>
          <el-form-item style="width:100%;">
            <el-button round type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">
              登录
            </el-button>
          </el-form-item>
          <!--<el-form-item style="width:100%;">-->
          <!--<router-link to="/register">-->
          <!--<el-button style="width:100%;">-->
          <!--注册-->
          <!--</el-button>-->
          <!--</router-link>-->
          <!--</el-form-item>-->
          <h3 class="company">Copyright © Hangzhou Yuqiong Tech</h3>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import sha256 from 'crypto-js/sha256'
import {requestLogin} from '@/api/user'

export default {
  name: 'app-login',
  data () {
    return {
      logining: false,
      fromUrl: '/',
      ruleForm: {
        account: 'admin',
        checkPass: '123456'
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'} // require:是否必填，如不设置，则会根据校验规则自动生成;message:是提示的内容；trigger：是什么事件触发,blur失去焦点
        ],
        checkPass: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      checked: false
    }
  },
  methods: {
    handleSubmit (ev) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.logining = true
          const loginParams = {username: this.ruleForm.account, password: sha256(this.ruleForm.checkPass)}
          requestLogin(loginParams).then(data => {
            this.logining = false
            this.$message({
              message: '登录成功！',
              type: 'success'
            })
            this.$router.push(this.fromUrl)
          }).catch(err => {
            this.logining = false
            console.log(err)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.fullPath !== '/register' && !from.meta.errorPage) {
        vm.fromUrl = from.fullPath
      }
    })
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

  .title
    text-align: center;
    margin-bottom: 40px;
    font-size 20px
    font-weight bold
    color #303133


  .company
    text-align: center;
    margin-top: 50px;
    font-size 12px
    color #909399

  .page
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased
    .main-box
      height 72%
      width 100%
      min-width 1080px
      max-width 1160px
      max-height 768px
      margin 0 auto
      top 50%
      transform: translate(0%, -50%);
      position relative
      border-radius 8px
      box-shadow 0 20px 70px rgba(64,158,255,0.16)
      overflow hidden
      .left-bg-box
        width 100%
        height 100%
        overflow hidden
        position relative
        .login-bg-base
          position absolute
          top 54%
          left 12%
          width 100%
          max-width 400px
          transform: translate(0%, -50%);
        .login-bg-small01
          position absolute
          top 24%
          left 6%
          width 100%
          max-width 40px
          transform: translate(0%, -50%);
        .login-bg-small02
          position absolute
          top 32%
          left 16%
          width 100%
          max-width 50px
          transform: translate(0%, -50%);
        .login-bg-small03
          position absolute
          top 40%
          left 42%
          width 100%
          max-width 70px
          transform: translate(0%, -50%);
        .login-bg-small04
          position absolute
          top 42%
          left 7%
          width 100%
          max-width 100px
          transform: translate(0%, -50%);
        .login-bg-small05
          position absolute
          top 24%
          left 36%
          width 100%
          max-width 80px
          transform: translate(0%, -50%);


  .login-box
    position: absolute;
    top: 50%;
    right: 10%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    display: block;
    width: 100%;
    max-width: 400px;
    background-color: #FFF;
    margin: 0;
    padding: 30px;
    box-sizing: border-box;
    border-radius 4px
    .title-logo
      height 40px
      width 100%
      margin-bottom 24px





  .login-bg-ani01
    animation-name:bg-opacity;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;

  .login-bg-ani02
    animation-name:bg-move01;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;

  .login-bg-ani03
    animation-name:bg-move02;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;

  .login-bg-ani04
    animation-name:bg-move03;
    animation-duration:2s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;

  .login-bg-ani05
    animation-name:bg-move03;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:running;


  @keyframes bg-opacity
    0%   {opacity :0.1}
    50%  {opacity :0.7}
    100% {opacity :1}



  @keyframes bg-move01
    0%   {transform: translate(0%, -51%);}
    50%  {transform: translate(0%, -52%);}
    100% {transform: translate(0%, -49%);}

  @keyframes bg-move02
    0%   {transform: translate(0%, -80%);}
    50%  {transform: translate(0%, -60%);}
    100% {transform: translate(0%, -40%);}

  @keyframes bg-move03
    0%   {transform: translate(0%, -60%);}
    50%  {transform: translate(0%, -80%);}
    100% {transform: translate(0%, -40%);}


</style>
